<template>
  <div>
    <div class="table-header">
<!--      <Button type="primary" @click="toAssets(0)">发送朋友圈</Button>-->
    </div>
    <Table border :columns="columns12" :data="list">
      <template slot-scope="{ row }" slot="name">
        <strong>{{ row.business.name }}</strong>
      </template>
      <template slot-scope="{ row }" slot="z_address">
        <strong>{{ row.business.address }}</strong>
      </template>
      <template slot-scope="{ row }" slot="status">
        <Tag :color="row.status === 1 ? 'success' : 'warning'">{{row.status === 1 ? '正常' : '异常'}}</Tag>
      </template>
      <template slot-scope="{ row }" slot="content">
        <Tooltip max-width="300" :content="row.content" placement="top">
          <p class="max_content">{{row.content}}</p>
        </Tooltip>
      </template>
      <template slot-scope="{ row, index }" slot="action">
        <Button
          type="primary"
          size="small"
          style="margin-right: 5px"
          @click="toEdit(1, row)"
        >编辑</Button
        >
        <Button type="error" size="small" @click="remove(index)">删除</Button>
      </template>
    </Table>
    <Page
      :total="query.total"
      :page-size="query.size"
      :current="query.page"
      @on-change="onChange"
      show-total
    />
    <ContentEdit ref="contentEditRef"></ContentEdit>
  </div>
</template>
<script>
import { mapState, mapActions } from 'vuex'
import ContentEdit from './components/edit'

export default {
  components: { ContentEdit },
  data () {
    return {
      columns12: [
        {
          title: '商家姓名',
          width: 120,
          slot: 'name'
        },
        {
          title: '内容',
          slot: 'content'
        },
        {
          title: '发布地址',
          key: 'address'
        },
        {
          title: '注册地址',
          slot: 'z_address'
        },
        {
          title: '发送时间',
          width: 160,
          key: 'create_time'
        },
        // {
        //   title: '异常频率',
        //   slot: 'fre'
        // },
        {
          title: '状态',
          slot: 'status'
        },
        {
          title: '操作',
          slot: 'action',
          width: 180,
          align: 'center'
        }
      ]
    }
  },
  computed: {
    ...mapState('friends', ['list', 'query'])
  },
  methods: {
    ...mapActions('friends', ['_getInfoList']),
    remove (index) {
      this.data6.splice(index, 1)
    },
    init () {
      this._getInfoList(this.query)
    },
    onChange (page) {
      const { total } = this.query
      this.$store.commit('friends/SET_QUERY', {
        total,
        page
      })
      this.init()
    },
    toEdit (index, row) {
      // console.log(index, row)
      this.$refs.contentEditRef.init({ index, row })
    }
  },
  mounted () {
    this.init()
  }
}
</script>
<style lang="scss" scoped>
.table-header {
  position: relative;
  width: 100%;
  text-align: right;
  button {
    margin: 10px;
  }
}
.max_content {
  width: 310px;
  overflow: hidden;
  text-overflow:ellipsis; //溢出用省略号显示
  white-space:nowrap; //溢出不换行
}
</style>
